<template>
  <view class="demo-container">
    <view class="demo-block">
      <view class="demo-block__title">所有图标</view>
      <fu-grid :column-num="4" :border="false">
        <fu-grid-item v-for="icon in icons" :key="icon.name">
          <fu-icon :name="icon.name" size="50" />
          <text class="icon-name">{{ icon.name }}</text>
        </fu-grid-item>
      </fu-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      icons: [
        { name: "browsing-history" },
        { name: "cart" },
        { name: "coupon" },
        { name: "friends" },
        { name: "description" },
        { name: "gold-coin" },
        { name: "friends-o" },
        { name: "coupon-o" },
        { name: "like-o" },
        { name: "hot-o" },
        { name: "label" },
        { name: "map-marked" },
        { name: "label-o" },
        { name: "photo-o" },
        { name: "phone-o" },
        { name: "photograph" },
        { name: "question-o" },
        { name: "question" },
        { name: "send-gift-o" },
        { name: "setting-o" },
        { name: "star-o" },
        { name: "wap-home-o" },
        { name: "underway-o" },
        { name: "vip-card-o" },
        { name: "diamond" },
        { name: "loading" },
        { name: "pause-l" },
        { name: "minus-f" },
        { name: "tipsvip" },
        { name: "pause-f" },
        { name: "printer-o" },
        { name: "star" },
        { name: "stop" },
        { name: "Play" },
        { name: "card_fill" },
        { name: "wap-nav" },
        { name: "bell" },
        { name: "download" },
        { name: "notification" },
        { name: "smile-filling" },
        { name: "notification-filling" },
        { name: "wechat-o" },
        { name: "award1" },
        { name: "play1" },
        { name: "clock-o" },
        { name: "edit" },
        { name: "download1" },
        { name: "fire" },
        { name: "cash-back_o" },
        { name: "bx-radio-circle" },
        { name: "load" },
        { name: "fire-o" },
        { name: "bill-o" },
        { name: "setting" },
        { name: "underway" },
        { name: "wap-home" },
        { name: "weibo-o" },
        { name: "Contact" },
        { name: "a-WechatMoments" },
        { name: "passed" },
        { name: "photograph-o" },
        { name: "passed-o" },
        { name: "weibo" },
        { name: "comment-o" },
        { name: "enlarge" },
        { name: "wechat-moments" },
        { name: "notes" },
        { name: "pause-o" },
        { name: "wechat_pay_line" },
        { name: "info-fill" },
        { name: "left-arrow" },
        { name: "left-btn" },
        { name: "right1" },
        { name: "right-btn" },
        { name: "search" },
        { name: "smile" },
        { name: "sorting" },
        { name: "flag-o" },
        { name: "contact-fill" },
        { name: "cash-back-record" },
        { name: "notes-o" },
        { name: "vip" },
        { name: "checkbox-circle-fill" },
        { name: "checkbox-circle-line" },
        { name: "checkmarkempty" },
        { name: "hand-down" },
        { name: "hand-down-fill" },
        { name: "a-ic_wechatpay" },
        { name: "closeempty" },
        { name: "playfill" },
        { name: "phone" },
        { name: "cc-card-o" },
        { name: "play" },
        { name: "more" },
        { name: "loada" },
        { name: "up" },
        { name: "infoo" },
        { name: "gift" },
        { name: "delete" },
        { name: "2401shuaxin2" },
        { name: "qq" },
        { name: "refreshb" },
        { name: "sort" },
        { name: "wechat" },
        { name: "bello" },
        { name: "thumb-up" },
        { name: "ic_description" },
        { name: "location" },
        { name: "checkbox" },
        { name: "checkbox-o" },
        { name: "more1" },
        { name: "lock-o" },
        { name: "stop-o" },
        { name: "scan" },
        { name: "left" },
        { name: "pause" },
        { name: "pause1" },
        { name: "video-fill" },
        { name: "eye-fill" },
        { name: "radio-circle-marked" },
        { name: "alipay" },
        { name: "more-o" },
        { name: "lock" },
        { name: "audio" },
        { name: "audio-fill" },
        { name: "minus-" },
        { name: "alipay-o" },
        { name: "more2" },
        { name: "stopcircle-fill" },
        { name: "expandalt-fill" },
        { name: "eye" },
        { name: "expand-alt" },
        { name: "sort-down" },
        { name: "share" },
        { name: "videocameraadd" },
        { name: "backward" },
        { name: "flag" },
        { name: "add-square-o" },
        { name: "delete-o" },
        { name: "down" },
        { name: "right" },
        { name: "add-square" },
        { name: "audio1" },
        { name: "bill" },
        { name: "bars" },
        { name: "cart" },
        { name: "chat" },
        { name: "chat-o" },
        { name: "browsing-history" },
        { name: "clock" },
        { name: "comment" },
        { name: "diamond-o" },
        { name: "gold-coin-o" },
        { name: "hot" },
        { name: "manager" },
        { name: "manager-o" },
        { name: "location-o" },
        { name: "photo" },
        { name: "printer" },
        { name: "point-gift-o" },
        { name: "vip-card" },
        { name: "volume-o" },
        { name: "volume" },
        { name: "send-gift" },
        { name: "qq-o" },
        { name: "award" },
        { name: "shop-o" },
        { name: "close-o" },
        { name: "close" },
        { name: "thumbsup" },
        { name: "like" },
        { name: "shop" },
        { name: "add" },
        { name: "add-o" },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
    text-align: center;
  }

  .icon-name {
    margin-top: 8rpx;
    font-size: var(--fu-font-size-sm);
    color: var(--fu-text-color);
    text-align: center;
  }
}
</style> 